<template>
  <view class="record" v-if="listData && listData.length">
    <view v-for="(item, index) in listData" :key="index" class="grid-body content-box" @click="link(item)">
      <view class="info flex">
        <image class="icon" src="/static/images/online-examination/icon-examination.png" />
        <view class="ml-20 info-right">
          <view class="title mt-10">{{ item.planName }}</view>
          <view v-if="queryParams.planMethod === 1" class="my-10 font-12 color-BBBBBB">
            合格分/满分：{{ item.passScore }}/{{ item.totalScore }}</view
          >
          <view v-if="queryParams.planMethod === 2" class="my-10 font-12 color-BBBBBB">
            合格分：{{ item.passScore }}</view
          >
          <view class="my-10 font-12 color-BBBBBB"> 我的成绩：{{ item.score }}</view>
        </view>
      </view>
      <view class="footer">
        <view v-if="queryParams.planMethod === 1" class="font-12 color-BBBBBB">
          交卷时间：{{ item.submitTime | format }}</view
        >
        <view v-else class="font-12 color-BBBBBB">
          考试时间：{{ item.startTime | format }} ~ {{ item.endTime | format }}</view
        >
        <view v-if="item.enableContinueExam" class="re-exam" @click.stop="hanldeReExam(item)">重新考试</view>
      </view>
      <image class="icon-right1" :src="`/static/images/online-examination/icon-${getIconSubffix(item)}.png`" />
    </view>
    <exam-start-dialog v-model="dialogVisible" @confirm="startTest" :count-tip="countTip" :type="'primary'" />
  </view>
  <Empty v-else />
</template>

<script>
import { getTestList, getStartTest } from '@/api/educational-training/online-examination'
import ExamStartDialog from './components/ExamStartDialog'
import Empty from '@/components/cu-empty/index.vue'
import dayjs from 'dayjs'
export default {
  name: 'online-record',
  components: {
    ExamStartDialog,
    Empty
  },
  props: {},
  filters: {
    format(val) {
      if (!val) return val
      return dayjs(val).format('YYYY/MM/DD HH:mm')
    }
  },
  data() {
    return {
      listData: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        planMethod: 1,
        isFinish: true,
        userId: this.$store.state.user.staffId
      },
      total: 0,
      dialogVisible: false,
      countTip: '',
      taskId: ''
    }
  },
  created() {},
  onShow() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.queryParams.pageNum++
    this.getList()
  },
  methods: {
    onfreshBottom() {
      const { pageNum, pageSize } = this.queryParams
      if (pageNum * pageSize < this.total) {
        this.queryParams.pageNum += 1
        this.getList(false)
      }
    },
    initData(tabIndex) {
      this.queryParams.pageNum = 1
      this.total = null
      this.queryParams.planMethod = tabIndex + 1
      this.getList()
    },
    async getList(isRefresh = true) {
      const { total, rows } = await getTestList(this.queryParams).finally(() => uni.stopPullDownRefresh())
      this.listData = this.queryParams.pageNum === 1 ? rows : [...this.listData, ...rows]
      this.total = total
    },
    link(item) {
      if (item.status === '4') return
      if (this.queryParams.planMethod === 1) {
        // 缺考
        if (item.passLabel === '缺考') {
          return
        }
        uni.navigateTo({
          url: `/pages/work/online-examination/examination-detail?examPlanId=${item.taskId}`
        })
      }
    },
    hanldeReExam(item) {
      this.taskId = item.taskId
      this.dialogVisible = true
      this.countTip = `${item.makeUpExamCount}`
    },
    async startTest() {
      await getStartTest(this.taskId)
      uni.navigateTo({
        url: `/pages/work/online-examination/take-part-online-examination?examPlanId=${this.taskId}&start=true`
      })
    }
  },
  computed: {
    getIconSubffix() {
      return (data) => {
        if (data.passLabel === '缺考') {
          return 'defect'
        } else {
          if (data.passLabel === '合格') {
            return 'p'
          } else if (data.passLabel === '待阅卷') {
            return 'yue'
          } else {
            return 'l'
          }
        }
      }
    },
    time() {
      return (data) => {
        if (!data.actualStartTime || !data.actualEndTime) return '--'
        return `${dayjs(data.actualStartTime).format('YYYY/MM/DD')} ${dayjs(data.actualStartTime).format(
          'HH:mm'
        )}~${dayjs(data.actualEndTime).format('HH:mm')}`
      }
    }
  },
  onPullDownRefresh() {
    this.queryParams.pageNum = 1
    this.getList()
  },
  onReachBottom() {
    const { pageNum, pageSize } = this.queryParams
    if (pageNum * pageSize < this.total) {
      this.queryParams.pageNum += 1
      this.getList(false)
    }
  }
}
</script>

<style scoped lang="scss">
.record {
  margin-top: 30rpx;
}

.content-box {
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx 20rpx 30rpx;
  position: relative;

  .info {
    position: relative;
    justify-content: space-between;
    align-items: center;
  }

  .info-right {
    flex: 1;
    min-height: 150rpx;
  }

  image {
    width: 150rpx;
    height: 150rpx;
  }

  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
    word-break: break-all;
  }

  .time {
    font-size: 26rpx;
    color: #999999;
    font-weight: 400;
    margin-top: 10rpx;
  }

  .submit {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    line-height: 50rpx;
    height: 50rpx;
    font-size: 28rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    background: #c4c088;
    padding: 0 24rpx;

    &.disabled {
      background: #ccc;
    }
  }

  .footer {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .re-exam {
      line-height: 50rpx;
      height: 50rpx;
      font-size: 28rpx;
      background: #2ac0c8;
      color: #fff;
      padding: 0 24rpx;
    }
  }

  .icon-right1 {
    width: 170rpx;
    height: 150rpx;
    position: absolute;
    right: 70rpx;
    bottom: 100rpx;
    display: block;
  }
}
</style>
